<template>
  <div class="yesterday">
    <div class="title">昨日数据</div>
    <el-row class="data">
      <el-col :xs="8" :sm="4" :md="4">
        <mainContent :content="yesterday.maxTmp + '°'" title="最高温度" />
      </el-col>
      <el-col :xs="8" :sm="4" :md="4">
        <mainContent :content="yesterday.avgTmp + '°'" title="平均温度" />
      </el-col>
      <el-col :xs="8" :sm="4" :md="4">
        <mainContent :content="yesterday.minTmp + '°'" title="最低温度" />
      </el-col>
      <el-col :xs="8" :sm="4" :md="4">
        <mainContent :content="yesterday.hum + '%'" title="相对湿度" />
      </el-col>
      <el-col :xs="8" :sm="4" :md="4">
        <mainContent :content="yesterday.qlty" title="空气质量" />
      </el-col>
      <el-col :xs="8" :sm="4" :md="4">
        <mainContent :content="yesterday.wind + 'km/h'" title="风速" />
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import mainContent from "@/components/main/main-content.vue";

const props = defineProps({
  yesterday: {
    type: Object,
  },
});
</script>

<style lang="less" scoped>
.yesterday {
  border-radius: 16px;
  background-color: #f7f8f9;
  border: 1px solid #f2f4fa;
  padding: 30px 16px 20px;
  margin-bottom: 16px;
  .title {
    font-size: 20px;
    font-weight: 500;
    line-height: 22px;
    text-align: center;
  }
  .data {
    margin-top: 20px;
  }
}
</style>